<template>
	<view v-if="shopinfo">
		<view class="shop_info">
			<view class="shop-icon">
				<view>
					<image class="shop-icon-img" mode="aspectFill" :src="baseUrl+shopinfo.shopCover"></image>
				</view>
				<view class="shop-name">
					<text style="font-size: 16px;font-weight: bold;">{{shopinfo.shopName}}</text>
					<uni-rate :readonly="true" size="15" :value="2" />
				</view>
			</view>
			<view>
				<button v-if="!shopinfo.cared" @click="careBtn" style="background-color: coral;color: white;" size="mini"><uni-icons size="14" color="white" type="plusempty"></uni-icons>关注</button>
				<button v-else @click="cancelcareBtn" style="background-color: lightgray;color: white;" size="mini"> - 取消关注</button>
			</view>
		</view>
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="black"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<view class="title">
						<view  v-for="(item,index) in changes"
						 :key="index">
						 <view style="display: flex;">
							 <text :class="currentIndex == index? 'activation':'' "
							  @click="changeSelect(index)">
							  {{item.text}}
							  </text>
							  <view v-if="index == 3">
								 <uni-icons v-if="defaultSort == 0" custom-prefix="iconfont" type="icon-jiagepaixuc"></uni-icons>
								 <uni-icons v-else-if="defaultSort == 1" custom-prefix="iconfont" type="icon-jiagepaixua"></uni-icons>
								 <uni-icons  v-else-if="defaultSort == 2"  custom-prefix="iconfont" type="icon-jiagepaixub"></uni-icons>
							  </view>
						 </view>
						</view>
					</view>
					<view class="goodlist">
						<view class="good-info" v-for="(item,index) in goodsList" @click.stop="gotoGoodInfo(item.id)">
							<image style="border-radius: 5px;" class="img" mode="aspectFill" :src="item.mainImage"></image>
							<text class="good-name">{{item.goodsName}}</text>
							<view>
								<text style="color: coral;">{{item.price}}</text>
								<text style="color: gray;">{{item.selledQuantity ? item.selledQuantity : 0}} 单历史成交</text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="category">
					    <lr-scroll :scrollList="classics"></lr-scroll>
						<!-- <lr-scroll :scrollList="goods"></lr-scroll> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {baseUrl} from '@/api/request'
import { ref } from 'vue';
import {info} from '@/api/shop.ts'
import {page} from '@/api/goods.ts'
import {listClassic} from'@/api/classic.ts'
import {savecareShop,removecareShop} from '@/api/care-shop.ts'
import { onLoad } from '@dcloudio/uni-app';
const careBtn=()=>{
	savecareShop({"shopId":shopinfo.value.id}).then(res=>{
		if(res.code==200){
			uni.showToast({
				title:'关注成功'
			})
			getShopInfo(shopId.value)
		}
	})
}
const cancelcareBtn=()=>{
	const ids=[shopinfo.value.id]
	removecareShop(ids).then(res=>{
		if(res.code==200){
			uni.showToast({
				title:'取消关注成功'
			})
			getShopInfo(shopId.value)
		}
	})
}
	const shopinfo=ref()
	const shopId=ref()
	onLoad((options)=>{
		shopId.value=options.id
		getShopInfo(options.id)
		getGoods(options.id)
		getClassic(options.id)
	})
	const classics = ref([])
	const getClassic=(id)=>{
		listClassic(id).then(res=>{
			classics.value=res.data;
			classics.value.forEach(item=>{
				if(item.goods_list && item.goods_list.length>0){
					item.goods_list.forEach(cart=>{
						// cart.images=baseUrl+cart.images
					})
				}
			})
		})
	}
	const getShopInfo=(id)=>{
		info(id).then(res=>{
			shopinfo.value=res.data
		})
	}
	const gotoGoodInfo=(val)=>{
		uni.navigateTo({
		  url:'/pages/goods/detail?id='+val,
		})
	}
	const total=ref(0)
	const goodsList=ref([])
	const getGoods=(val)=>{
		page({"shopId":val}).then(res=>{
			goodsList.value=res.data.list;
			total.value=res.data.total;
		})
	}

	const defaultSort=ref(0)
	const currentIndex=ref(0)
	const changeSelect=(index)=>{
		currentIndex.value=index
		if(index == 3){
			if(defaultSort.value == 0){
				defaultSort.value=1;
			}else if(defaultSort.value == 1){
				defaultSort.value=2;
			}else if(defaultSort.value == 2){
				defaultSort.value=1;
			}
		}else{
			defaultSort.value=0;
		}
	}
	const changes=ref([
		{
			index:0,
			text:'综合'
		},
		{
			index:1,
			text:'销量'
		},
		{
			index:2,
			text:'上新'
		},
		{
			index:3,
			text:'价格'
		}
	])
	const current=ref(0)
	const items =ref(['宝贝', '分类'])
	const onClickItem=(e)=> {
      if (current.value != e.currentIndex) {
        current.value = e.currentIndex;
      }
    }
</script>

<style scoped>
	.category{
		height: 80vh;
	}
	.goodlist{
	  margin-top: 5px;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr); /* 三列等宽 *//* 自动填充列，每列最小宽度150px，最大宽度根据可用空间自动调整 */
	  gap: 2px; /* 卡片之间的间距 */
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  /* overflow: auto; */
	  height: 90%;
	  padding: 4px;
	}
	.good-name{
		font-weight: bold;
		font-size: 16px;
	}
	.img{
		width: 100%;
		height: 160px;
		border-radius: 5px;
	}
	.good-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10px;
	}
	.good-info text{
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
	}
	.activation{
	  color: coral;
	}
	.title{
		display: flex;
		justify-content: space-evenly;
		padding: 10px;
		position: absolute;
		top:0;
		width: 100%;
		background-color:white;
	}
	.content{
		position: relative;
	}
	.shop-name{
		margin-left: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	.shop-icon{
		display: flex;
		justify-content: space-between;
	}
	.shop_info{
		padding: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.shop-icon-img{
		width: 50px;
		height: 50px;
		border-radius: 5px;
	}
</style>